@import "./../common/size";

.login-page{
  display: flex;
  flex:1;
  .form-group{
    padding: 10px 6px;
    margin-bottom: 10px;

    input[type="text"] {
      height: 39px;
      border-radius: 4px;
      border: 1px solid;
      border-color: #ccc;
      padding: 0 10px;
      transition: all .3s linear;
      font-size: 14px;
    }

    input[type="text"]:focus{
      border-color:$themeColor;
    }

    input[type="text"]::-webkit-input-placeholder{
      font-size: 14px;
      color: #888;
    }

    .textarea{
      overflow: hidden;
      height: 120px;
      padding: 8px;
      position: relative;
    }

    .textarea-fill{
      position: absolute;
      border-radius: 4px;
      left: 0;
      right: 0;
      top:0;
      bottom: 0;
      z-index: 1;
      border: 1px solid;
      border-color: #ccc;
      background: #fff;
    }


    textarea{
      resize:none;
      padding: 0;
      margin: 0;
      width: 100%;
      height: 100%;
      outline: none;
      background: transparent;
      border: none;
      position: relative;
      z-index: 2;
      font-size: 14px;
    }

    textarea::-webkit-input-placeholder{
      font-size: 14px;
      color: #888;
    }

    textarea:focus~.textarea-fill{
      border-color:$themeColor;
    }

    button{
      width: 100%;
      height: 49px;
      background: $themeColor;
      border-radius: 4px;
      color: #fff;
      font-size: 16px;
    }
  }

  .form-group * {
    width: 100%;
  }

  .flex-1{
    flex:1;
    display: flex;
    align-items: center;
  }

  .login-form{
    display: block;
    width: 100%;
    padding: 0 20px;
  }

}